<template>
    <homeview></homeview>
    <div class="college-intro-page">

        <section class="banner-section">
            <img class="banner-img" :src="college_img" alt="学院横幅" @error="college_img = '/static/fallback.jpg'" />
            <div class="slogan">
                <h1>{{ img_text }}</h1>
            </div>
        </section>

        <section class="major-section">
            <h2>专业介绍</h2>
            <p>
                计算机学院以 "技术筑基、创新驱动、产业融合"
                为办学理念，致力于培养具有国际视野、实践能力和创新精神的复合型计算机人才。学院依托前沿技术教学体系与企业实践平台，让学生掌握计算机核心技术，成长为能适应人工智能、大数据、云计算等领域发展的专业人才。
            </p>
            <div class="major-courses">
                <h3>主要课程</h3>
                <div class="course-tags">
                    <span class="tag" v-for="(course, index) in courses[0]" :key="index">{{ course }}</span>
                </div>
            </div>
        </section>

        <section class="teacher-section">
            <h2>讲师团队</h2>
            <div class="teacher-list">
                <div class="teacher-item" v-for="(teacher, index) in teachers" :key="index">
                    <div class="avatar-container">
                        <img :src="teacher.teacher_image" alt="讲师头像" class="teacher-avatar" />
                    </div>
                    <div class="teacher-info">
                        <h3>{{ teacher.teacher_introduce }}</h3>
                        <h3>{{ teacher.teacher_position }}</h3>
                        <p class="teacher-desc">{{ teacher.teacher_skill }}</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="employment-section">
            <h2>就业喜报</h2>
            <apply></apply>
        </section>
    </div>
</template>

<script setup>
import Homeview from './Homeview.vue';
import { ref, reactive, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import http from '@/http/index.js';
import apply from '@/views/apply.vue'
const route = useRoute()
const label = route.params.str
const teachers = reactive([])
const info = reactive([])
let college_img = ref('')
const employmentReports = reactive([]);
const courses = reactive([])
let img_text = ref('')
const teacherList = ref([]);
onMounted(() => {
    http({
        method: 'get',
        url: 'cont/famous/'

    }).then(resp => {
        teacherList.value.splice(0, teacherList.length, ...resp.data.data)
        console.log(resp);

    }).catch(error => {
        console.log(error);

    })
})

onMounted(() => {
    http({
        method: 'get',
        url: '/profession/',
        params: {
            college: label
        }
    }).then(resp => {
        console.log(resp);
        info.splice(0, info.length, ...resp.data.professions_info)
        college_img.value = info[0].profession_image
        img_text.value = info[0].profession_image_text
        courses.splice(0, courses.length, info[0].profession_course.split('、'))
        teachers.splice(0, teachers.length, ...resp.data.teachers)
    }).catch(error => {
        console.log(error);
    })
})
</script>

<style scoped>
.college-intro-page {
    width: 85%;
    max-width: 1200px;
    margin: 0 auto;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #333;
    padding-bottom: 60px;
}

/* 图片标语区域样式 */
.banner-section {
    position: relative;
    text-align: center;
    margin-bottom: 50px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.banner-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.banner-img:hover {
    transform: scale(1.02);
}

.slogan {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    padding: 15px 30px;
    border-radius: 8px;
    color: #fff;
    max-width: 80%;
}

.slogan h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* 专业介绍区域样式 */
.major-section {
    margin-bottom: 60px;
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.major-section h2 {
    font-size: 28px;
    color: #2c3e50;
    border-left: 5px solid #3498db;
    padding-left: 15px;
    margin-bottom: 25px;
    font-weight: 600;
}

.major-section p {
    line-height: 1.8;
    text-indent: 2em;
    margin-bottom: 20px;
    font-size: 16px;
    color: #555;
}

.major-courses h3 {
    font-size: 22px;
    margin: 25px 0 15px;
    color: #2c3e50;
}

.course-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tag {
    background: #e8f4fc;
    color: #3498db;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.tag:hover {
    background: #3498db;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

/* 讲师介绍区域样式 */
.teacher-section {
    margin-bottom: 60px;
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.teacher-section h2 {
    font-size: 28px;
    color: #2c3e50;
    border-left: 5px solid #e74c3c;
    padding-left: 15px;
    margin-bottom: 25px;
    font-weight: 600;
}

.teacher-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 150px;
}

.teacher-item {
    display: flex;
    background: #f9f9f9;
    border-radius: 10px;
    padding: 20px;
    transition: all 0.3s ease;
    align-items: center;
    width: 450px;
}

.teacher-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.avatar-container {
    width: 140px;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 20px;
    flex-shrink: 0;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.teacher-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teacher-info h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #2c3e50;
}

.teacher-desc {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    text-indent: 2em;

}

/* 就业喜报区域样式 */
.employment-section {
    margin-bottom: 40px;
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.employment-section h2 {
    font-size: 28px;
    color: #2c3e50;
    border-left: 5px solid #2ecc71;
    padding-left: 15px;
    margin-bottom: 25px;
    font-weight: 600;
}

.employment-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.employment-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.employment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.card-header {
    background: linear-gradient(135deg, #3498db, #2c3e50);
    color: white;
    padding: 15px 20px;
}

.card-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}

.card-body {
    padding: 20px;
}

.congrats {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
    font-weight: 500;
}

.position {
    font-size: 14px;
    color: #666;
}

.position span {
    color: #e74c3c;
    font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .college-intro-page {
        width: 95%;
    }

    .banner-img {
        height: 250px;
    }

    .slogan h1 {
        font-size: 20px;
    }

    .major-section,
    .teacher-section,
    .employment-section {
        padding: 20px;
    }

    .teacher-list,
    .employment-cards {
        grid-template-columns: 1fr;
    }

    .teacher-item {
        flex-direction: column;
        text-align: center;
    }

    .avatar-container {
        margin-right: 0;
        margin-bottom: 15px;
    }
}
</style>